<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>注册用户</h2>
        <form @submit.prevent="register">
          <label for="name">用户名:</label>
          <input type="text" id="name" v-model.trim.lazy="user.username" required><br>
          <label for="password">密码:</label>
          <input type="password" id="password" v-model="user.password" required><br>
          <label for="age">年龄</label>
          <input type="number" id="age" v-model="user.age" required><br>
          <label for="gender">性别:</label>
          <select id="gender" v-model="user.gender">
            <option value="male">男</option>
            <option value="female">女</option>
          </select><br>
          爱好:<br>
          学习: <input type="checkbox" v-model="user.hobby" value="学习">
          打游戏: <input type="checkbox" v-model="user.hobby" value="打游戏">
          睡觉: <input type="checkbox" v-model="user.hobby" value="睡觉"><br/>
          <input type="checkbox" id="agreement" v-model="agreed">
          <label for="agreement">接受并阅读</a> <a href="#">《用户协议》</a>:</label>
          <br>
          <button type="submit">注册</button>
        </form>
        <button type="button" @click="goTo">查看用户列表</button>
      </div>
      <script>

        let ref = Vue.ref;



        const app = Vue.createApp({

            setup(props) {
                const user = ref({
                    username:'',
                    password:'',
                    age:0,
                    gender:'男',
                    hobby:[]
                });
                let goTo = function name(params) {
                    location.href = '/Vue/userList.html';
                };
                let agreed = ref(false);
                const register = () => {
                    if (!agreed.value) {
                        alert('请先勾选协议');
                        return;
                    }
                    // 发送请求进行注册
                    axios.post('http://localhost:8080/user/register', user.value)
                    .then(response => {
                        alert('注册成功');
                        // 注册成功后重置表单
                        user.value = { 
                            username:'',
                            password:'',
                            age:0,
                            gender:'男',
                            hobby:[]
                            };
                        agreed.value = false;
                        
                    })
                    .catch(error => {
                        console.error(error);
                        alert('注册失败');
                    });
                }
                return {user,agreed,goTo,register}
            }
        }).mount("#app");
      </script>
</body>
</html>